<template>
  <div class="navfooter">
    <router-link :to="item.path" v-for="(item, index) in navArr" :key="index">
      <img :src="$route.path == item.path ? item.imgfull : item.img" alt="#" />
      <span :class="$route.path == item.path ? 'active' : ''">{{
        falg? item.title2 :
         item.title
      }}</span>
    </router-link>
  </div>
</template>

<script>
import home from "../assets/image/tabbar/home.png";
import homefull from "../assets/image/tabbar/homeFull.png";
import cate from "../assets/image/tabbar/cate.png";
import catefull from "../assets/image/tabbar/cateFull.png";
import shop from "../assets/image/tabbar/shop.png";
import shopfull from "../assets/image/tabbar/shopFull.png";
import user from "../assets/image/tabbar/user.png";
import userfull from "../assets/image/tabbar/userFull.png";
export default {
  data() {
    return {
      falg: false,
      navArr: [
        { path: "/home", title: "商城", title2:'商城', img: home, imgfull: homefull },
        { path: "/cate", title: "分类", title2:'分类', img: cate, imgfull: catefull },
        {
          path: "/cart",
          title: "购物车",
          title2:'购物车',
          img: shop,
          imgfull: shopfull,
        },
        {
          path: "/my",
          title: "未登录",
          title2: "我的",
          img: user,
          imgfull: userfull,
        },
      ],
    };
  },
  mounted() {
    let userinfoObj = localStorage["appUser"]
      ? JSON.parse(localStorage["appUser"])
      : "";
    if (userinfoObj) {
      this.falg = true;
    }
  },
};
</script>

<style>
.navfooter {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 10vh;
  border-top: 1px solid #d5d5d5;
}
.navfooter a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;
  color: black;
}
.navfooter span {
  margin-top: 5px;
}
.active {
  color: coral;
}
</style>